<template>
  <div class="error-container">
    <div class="nots">
      <section class="error_img">
        <img :src="query.logo" v-if="query.logo" />
        <img
          src="https://img.wifenxiao.com/h5-wfx/images/error/error_page.png"
          height
          alt
          v-else
        />
      </section>
      <div class="title error">
        <p class="tip">I'm sorry</p>
        <a href="javascript:;">{{query.msg}}</a>
      </div>
      <!-- TODO 小程序暂定返回上一页 -->
      <a @click="backTo" class="btn" id="back" v-if="query.back_url">返回</a>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { openPage } from '@/utils/utils'
export default Vue.extend({
  name: "index",
  data() {
    return {
      query: {},
      backUrl: "",
    };
  },
  methods: {
    backTo() {
      openPage(this.query.back_url,1)
    },
    getErrorParams(val) {
      this.query = this.$route.query;
      // 转化链接
      if (this.query.back_url) {
        // 路由中有‘-
        const urlArr = this.query.back_url.split("?");
        if (urlArr[1]) {
          const arr = urlArr[1].split("-");
          this.backUrl = urlArr[0] + "?" + arr.join("&");
        } else {
          this.backUrl = this.query.back_url;
        }
      }
    },
  },
  mounted() {
    this.getErrorParams();
  },
});
</script>
<style lang="scss">
body {
  background-color: #fff;
}
.error-container {
  .nots {
    padding-top: 60px;
    width: 100%;
    text-align: center;
  }
  .error_img {
    display: block;
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
    min-height: 500px;
    margin-top: 20%;
    background: url(https://img.wifenxiao.com/h5-wfx/images/error/error_page_bg.png)
      no-repeat;
    background-size: 100%;
    img {
      display: block;
      width: 100%;
      margin: 0 auto;
      max-width: 400px;
      margin-top: 20%;
    }
  }
  .title {
    &.error {
      position: relative;
      width: 62.5%;
      margin: 0px auto 0;
      padding: 20px 60px;
      font-size: 26px;
      color: #000;
      text-align: left;
      border-radius: 6px;
      line-height: 1.5em;
      text-align: center;
      .tip {
        font-size: 44px;
        color: #eb6100;
        padding-bottom: 20px;
        font-weight: 500;
      }
      a {
        font-size: 26px;
        color: #000;
      }
    }
  }
  .btn {
    display: block;
    background: #ff5f28;
    width: 24%;
    margin: 44px auto;
    height: 60px;
    line-height: 60px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    white-space: nowrap;
    border-radius: 80px;
  }
}
</style>